<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>控制台错误检测器</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background: #f5f5f5;
    }
    .container {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    h1 {
      color: #333;
      border-bottom: 2px solid #3b82f6;
      padding-bottom: 10px;
    }
    .error-box {
      background: #fee;
      border-left: 4px solid #ef4444;
      padding: 15px;
      margin: 10px 0;
      border-radius: 4px;
      font-family: monospace;
      font-size: 14px;
    }
    .warning-box {
      background: #fef3c7;
      border-left: 4px solid #f59e0b;
      padding: 15px;
      margin: 10px 0;
      border-radius: 4px;
      font-family: monospace;
      font-size: 14px;
    }
    .success-box {
      background: #d1fae5;
      border-left: 4px solid #10b981;
      padding: 15px;
      margin: 10px 0;
      border-radius: 4px;
    }
    button {
      background: #3b82f6;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      margin: 5px;
    }
    button:hover {
      background: #2563eb;
    }
    .log-item {
      padding: 8px;
      margin: 5px 0;
      border-radius: 4px;
      font-family: monospace;
      font-size: 13px;
    }
    .log-error {
      background: #fee;
      color: #dc2626;
    }
    .log-warning {
      background: #fef3c7;
      color: #d97706;
    }
    .log-info {
      background: #e0f2fe;
      color: #0369a1;
    }
    pre {
      background: #f8f8f8;
      padding: 10px;
      border-radius: 4px;
      overflow-x: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🔍 浏览器控制台错误检测器</h1>
    
    <div style="margin: 20px 0;">
      <button onclick="openDocPage()">📄 打开文档页面</button>
      <button onclick="captureErrors()">🐛 捕获当前错误</button>
      <button onclick="checkDomStructure()">🔍 检查 DOM 结构</button>
      <button onclick="clearResults()">🗑️ 清除结果</button>
    </div>

    <div id="results"></div>
  </div>

  <script>
    let errorLog = [];
    let warningLog = [];

    // 捕获控制台错误
    const originalError = console.error;
    console.error = function(...args) {
      errorLog.push({
        type: 'error',
        message: args.join(' '),
        stack: new Error().stack,
        time: new Date().toLocaleTimeString()
      });
      originalError.apply(console, args);
    };

    // 捕获控制台警告
    const originalWarn = console.warn;
    console.warn = function(...args) {
      warningLog.push({
        type: 'warning',
        message: args.join(' '),
        time: new Date().toLocaleTimeString()
      });
      originalWarn.apply(console, args);
    };

    function openDocPage() {
      window.open('http://localhost:5173/documentation/markdown-advanced-features', '_blank');
      setTimeout(() => {
        alert('请检查新打开的页面控制台，然后回到这里点击"捕获当前错误"按钮');
      }, 1000);
    }

    function captureErrors() {
      const resultsDiv = document.getElementById('results');
      let html = '<h2>📊 错误统计</h2>';
      
      if (errorLog.length === 0 && warningLog.length === 0) {
        html += '<div class="success-box">✅ 太棒了！没有发现任何错误或警告！</div>';
      } else {
        html += `<p>发现 <strong>${errorLog.length}</strong> 个错误，<strong>${warningLog.length}</strong> 个警告</p>`;
        
        if (errorLog.length > 0) {
          html += '<h3>❌ 错误列表</h3>';
          errorLog.forEach((log, i) => {
            html += `<div class="error-box">
              <strong>[${log.time}] 错误 ${i + 1}:</strong><br>
              ${escapeHtml(log.message)}
            </div>`;
          });
        }

        if (warningLog.length > 0) {
          html += '<h3>⚠️ 警告列表</h3>';
          warningLog.forEach((log, i) => {
            html += `<div class="warning-box">
              <strong>[${log.time}] 警告 ${i + 1}:</strong><br>
              ${escapeHtml(log.message)}
            </div>`;
          });
        }
      }

      // 导出数据
      html += '<h3>📋 导出数据</h3>';
      html += '<button onclick="copyErrorsToClipboard()">📋 复制错误信息</button>';
      html += '<pre id="errorData" style="max-height: 300px; overflow-y: auto;">' + 
        JSON.stringify({errors: errorLog, warnings: warningLog}, null, 2) +
        '</pre>';

      resultsDiv.innerHTML = html;
    }

    function checkDomStructure() {
      const resultsDiv = document.getElementById('results');
      let html = '<h2>🔍 DOM 结构检查</h2>';
      
      // 在当前页面检查（如果是从文档页面运行）
      const issues = [];

      // 检查 <p> 包含 <div>
      document.querySelectorAll('p').forEach((p, i) => {
        const divs = p.querySelectorAll('div');
        if (divs.length > 0) {
          issues.push({
            type: 'error',
            message: `❌ <p> 标签包含了 <div>（第 ${i + 1} 个段落）`,
            html: p.outerHTML.substring(0, 200) + '...'
          });
        }
      });

      // 检查 <p> 嵌套 <p>
      document.querySelectorAll('p p').forEach((p, i) => {
        issues.push({
          type: 'error',
          message: `❌ <p> 标签嵌套了 <p>（第 ${i + 1} 个）`,
          html: p.outerHTML.substring(0, 200) + '...'
        });
      });

      // 检查提示框结构
      document.querySelectorAll('.markdown-alert').forEach((alert, i) => {
        const children = Array.from(alert.children).map(c => c.tagName);
        html += `<div class="log-info">
          <strong>提示框 ${i + 1} 子元素:</strong> ${children.join(', ')}
        </div>`;
      });

      if (issues.length === 0) {
        html += '<div class="success-box">✅ DOM 结构检查通过！没有发现 HTML 嵌套错误。</div>';
      } else {
        issues.forEach(issue => {
          html += `<div class="error-box">
            <strong>${issue.message}</strong><br>
            <pre style="font-size: 11px; overflow-x: auto;">${escapeHtml(issue.html)}</pre>
          </div>`;
        });
      }

      html += '<p><small>💡 提示：这个检查在当前页面运行。要检查文档页面，请在文档页面的控制台运行相同的检查脚本。</small></p>';

      resultsDiv.innerHTML = html;
    }

    function clearResults() {
      errorLog = [];
      warningLog = [];
      document.getElementById('results').innerHTML = '';
    }

    function escapeHtml(text) {
      const div = document.createElement('div');
      div.textContent = text;
      return div.innerHTML;
    }

    function copyErrorsToClipboard() {
      const data = JSON.stringify({errors: errorLog, warnings: warningLog}, null, 2);
      navigator.clipboard.writeText(data).then(() => {
        alert('✅ 错误信息已复制到剪贴板！');
      });
    }

    // 页面加载时显示说明
    window.onload = function() {
      document.getElementById('results').innerHTML = `
        <div class="success-box">
          <h3>🎯 使用说明</h3>
          <ol>
            <li><strong>打开文档页面</strong>：点击"打开文档页面"按钮</li>
            <li><strong>等待页面加载</strong>：等待几秒让页面完全加载</li>
            <li><strong>回到这个页面</strong>：切换回这个检测器页面</li>
            <li><strong>捕获错误</strong>：点击"捕获当前错误"按钮查看结果</li>
          </ol>
          <p><strong>或者</strong>，你可以直接在文档页面的控制台运行检查脚本。</p>
        </div>
      `;
    };
  </script>
</body>
</html>

